<template>
  <div>
    <h1>app</h1>
    <ul class="list">
      <li>
        <router-link to="/about">about</router-link>
      </li>
      <li>
        <router-link to="/home">home</router-link>
      </li>
      <li>
        <!-- router-link进行页面跳转  两种方式 一种：路径  一种 路由名称  -->
        <!-- <router-link to="/center">home</router-link> -->
        <router-link :to="{ name: 'center' }">center</router-link>
      </li>
    </ul>
    <!-- 
      keep-alive  缓存路由组件对象
      1.默认情况下，路由组件之间的切换就是路由组件对象的销毁与重建
      2.使用缓存路由组件对象，就是组件的显示与隐藏  消耗性能少，用户体验好
      注：当对数据的实时性要求比较高，则不要使用keep-alive ,低的时候可以，用户体验好

     -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},

  watch: {},
};

/* 
使用路由组件的步骤
1.在views或者pages文件夹下，创建路由组件
2.在src文件夹下创建router文件夹，在该文件夹下创建index.js
下载vue-router
 
 npm install -S vue-router@3
// 引入vue
import Vue from 'vue';
// 引入路由
import VueRouter from 'vue-router';

// 声明使用vue插件
Vue.use(VueRouter);

export default new VueRouter({
    mode:"history",
    // 注册路由
    routes:[
      
    ]
})
3.在入口文件main.js中配置路由器对象（只发生一次）
  // 引入路由器
import router from './router/index';
在vue配置对象中配置路由器

4.注册路由
在路由器文件夹router中的index.js文件中引入路由模块，在routes中进行注册

5. 显示路由组件的内容
<router-link></router-link> 
将路由组件的内容，显示到该组件所占的位置
<router-view></router-view>


*/
</script>
<style lang='css' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list {
  display: flex;
  justify-content: space-between;
}
</style>